<template>
  <div>
    <!-- <h2>首页</h2> -->
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div id="echarts1" class="charts"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div id="echarts2" class="charts"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div id="echarts3" class="charts"></div>
        </el-card>
      </el-col>
      <!-- <el-col :span="6"><div class="grid-content ep-bg-purple">4</div></el-col> -->
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-card class="box-card">
          <div id="echarts4" class="charts"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div id="echarts5" class="charts"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div id="echarts6" class="charts"></div>
        </el-card>
      </el-col>
      <!-- <el-col :span="6"><div class="grid-content ep-bg-purple">4</div></el-col> -->
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      abc: 1
    }
  },
  mounted() {
    console.log('aa')
    this.initECharts1()
    this.initECharts2()
    this.initECharts3()
    this.initECharts4()
    this.initECharts5()
    this.initECharts6()
  },
  methods: {
    initECharts1() {
      // 基于准备好的dom，初始化echarts实例
      console.log(document.getElementById('echarts1'))
      var myChart = echarts.init(document.getElementById('echarts1'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例',
          textStyle: {
            fontSize: 13
          },
          textAlign: 'auto',
          subtext: '子标题'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      })
    },
    initECharts2() {
      var chartDom = document.getElementById('echarts2')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '30%']
        },
        visualMap: {
          type: 'piecewise',
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 1,
              lt: 3,
              color: 'rgba(0, 0, 180, 0.4)'
            },
            {
              gt: 5,
              lt: 7,
              color: 'rgba(0, 0, 180, 0.4)'
            }
          ]
        },
        series: [
          {
            type: 'line',
            smooth: 0.6,
            symbol: 'none',
            lineStyle: {
              color: '#5470C6',
              width: 5
            },
            markLine: {
              symbol: ['none', 'none'],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
            },
            areaStyle: {},
            data: [
              ['2019-10-10', 200],
              ['2019-10-11', 560],
              ['2019-10-12', 750],
              ['2019-10-13', 580],
              ['2019-10-14', 250],
              ['2019-10-15', 300],
              ['2019-10-16', 450],
              ['2019-10-17', 300],
              ['2019-10-18', 100]
            ]
          }
        ]
      }

      option && myChart.setOption(option)
    },
    initECharts3() {
      var chartDom = document.getElementById('echarts3')
      var myChart = echarts.init(chartDom)
      var option

      const data = []
      for (let i = 0; i <= 100; i++) {
        let theta = (i / 100) * 360
        let r = 5 * (1 + Math.sin((theta / 180) * Math.PI))
        data.push([r, theta])
      }
      option = {
        title: {
          text: 'Two Value-Axes in Polar'
        },
        legend: {
          data: ['line']
        },
        polar: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {},
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            data: data
          }
        ]
      }

      option && myChart.setOption(option)
    },
    initECharts4() {
      var chartDom = document.getElementById('echarts4')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: 'Waterfall Chart',
          subtext: 'Living Expenses in Shenzhen'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var tar = params[1]
            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Placeholder',
            type: 'bar',
            stack: 'Total',
            itemStyle: {
              borderColor: 'transparent',
              color: 'transparent'
            },
            emphasis: {
              itemStyle: {
                borderColor: 'transparent',
                color: 'transparent'
              }
            },
            data: [0, 1700, 1400, 1200, 300, 0]
          },
          {
            name: 'Life Cost',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
              position: 'inside'
            },
            data: [2900, 1200, 300, 200, 900, 300]
          }
        ]
      }

      option && myChart.setOption(option)
    },
    initECharts5() {
      var chartDom = document.getElementById('echarts5')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: [
          {
            text: 'Tangential Polar Bar Label Position (middle)'
          }
        ],
        polar: {
          radius: [30, '80%']
        },
        angleAxis: {
          max: 4,
          startAngle: 75
        },
        radiusAxis: {
          type: 'category',
          data: ['a', 'b', 'c', 'd']
        },
        tooltip: {},
        series: {
          type: 'bar',
          data: [2, 1.2, 2.4, 3.6],
          coordinateSystem: 'polar',
          label: {
            show: true,
            position: 'middle',
            formatter: '{b}: {c}'
          }
        }
      }

      option && myChart.setOption(option)
    },
    initECharts6() {
      var chartDom = document.getElementById('echarts6')
      var myChart = echarts.init(chartDom)
      var option

      setTimeout(function () {
        option = {
          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          dataset: {
            source: [
              ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
              ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
              ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
              ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
              ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
            ]
          },
          xAxis: { type: 'category' },
          yAxis: { gridIndex: 0 },
          grid: { top: '55%' },
          series: [
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '25%'],
              emphasis: {
                focus: 'self'
              },
              label: {
                formatter: '{b}: {@2012} ({d}%)'
              },
              encode: {
                itemName: 'product',
                value: '2012',
                tooltip: '2012'
              }
            }
          ]
        }
        myChart.on('updateAxisPointer', function (event) {
          const xAxisInfo = event.axesInfo[0]
          if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1
            myChart.setOption({
              series: {
                id: 'pie',
                label: {
                  formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                  value: dimension,
                  tooltip: dimension
                }
              }
            })
          }
        })
        myChart.setOption(option)
      })

      option && myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
/* .el-row {
  margin-bottom: 20px;
} */
.el-row:last-child {
  margin-bottom: 0px;
}
.el-col {
  border-radius: 4px;
}

.box-card {
  margin: 5px;
}

.charts {
  width: 100%;
  height: 350px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  border-width: 1px;
  border-color: red;
}
</style>
